import React, { Suspense } from 'react'
import { Router, Switch, Route, Redirect } from 'react-router-dom'
import AuthRoute from '@/components/AuthRoute'
import history from './utils/history'
const Login = React.lazy(() => import('@/pages/Login'))
const Home = React.lazy(() => import('@/layouts'))
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'))
const Chat = React.lazy(() => import('@/pages/Profile/Chat'))
const Feedback = React.lazy(() => import('@/pages/Profile/Feedback'))
const NotFound = React.lazy(() => import('@/pages/NotFound'))

function App() {
  return (
    <Router history={history}>
      <div className="App">
        <Suspense fallback={<div></div>}>
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route path="/home" component={Home} />
            <Route path="/login" component={Login} />

            {/* 权限访问路由 */}
            <AuthRoute path="/profile/edit" component={ProfileEdit} />
            <AuthRoute path="/profile/chat" component={Chat} />
            <AuthRoute path="/profile/feedback" component={Feedback} />

            {/* 404 */}
            <Route path="*" component={NotFound}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}

export default App
